<template>
  <div>
    <page-layout>
      <a-row :gutter="[10, 10]">
        <!-- 顶部区域 -->
        <a-col :span="24">
          <a-card>
            <div class="box-ver-hor-between">
              <div class="primary-color">项目管理</div>
              <div>
                <a-button type="primary" class="mr-20">
                  修改
                </a-button>
              </div>
            </div>
          </a-card>
        </a-col>

        <a-col :span="24">
          <a-card>
            <a-descriptions title="">
              <a-descriptions-item label="项目名称">{{ detailInfo.data.projectName || '-' }}</a-descriptions-item>
              <a-descriptions-item label="合作学校" :contentStyle="{color: '#1890FF'}">{{ detailInfo.data.schName || '-' }}</a-descriptions-item>
              <a-descriptions-item label="进度">
                {{ detailInfo.data.speedProgress ? dictLists.data['gjjd'].find(v => v.value == detailInfo.data.speedProgress).label : '-' }}
              </a-descriptions-item>
              <a-descriptions-item label="项目编号">{{ detailInfo.data.id || '-' }}</a-descriptions-item>
              <a-descriptions-item label="负责人">{{ detailInfo.data.responsiblePersonName || '-' }}</a-descriptions-item>
              <a-descriptions-item label="创建人">{{ detailInfo.data.creatBy || '-' }}</a-descriptions-item>
              <a-descriptions-item label="创建时间">{{ detailInfo.data.creatTime || '-' }}</a-descriptions-item>
              <a-descriptions-item label="综合评分">empty</a-descriptions-item>
            </a-descriptions>
            <a-tabs v-model:activeKey="activeKey" :animated="false">
              <a-tab-pane key="1" tab="详情">
                <DetailTab />
              </a-tab-pane>
<!--              <a-tab-pane key="2" tab="审批流" force-render>-->
<!--                <ApproveTab />-->
<!--              </a-tab-pane>-->
<!--              <a-tab-pane key="3" tab="学期">-->
<!--                <TermTab />-->
<!--              </a-tab-pane>-->
<!--              <a-tab-pane key="4" tab="报名信息">-->
<!--                <SignTab />-->
<!--              </a-tab-pane>-->
<!--              <a-tab-pane key="5" tab="成本统计">-->
<!--                <CostTab />-->
<!--              </a-tab-pane>-->
<!--              <a-tab-pane key="6" tab="课程信息">-->
<!--                <CourseTab />-->
<!--              </a-tab-pane>-->
            </a-tabs>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import DetailTab from './components/detail-tab'
import ApproveTab from './components/approve-tab'
import TermTab from './components/term-tab'
import SignTab from './components/sign-tab'
import CostTab from './components/cost-tab'
import CourseTab from './components/course-tab'
import { selectById } from '@/api/module/project'
import {useRoute} from 'vue-router'
import {message} from "ant-design-vue"
import { getDictByCodesReturnObj } from '@/tools/get-dict'
import dictEnum from '@/const/dict'

const activeKey = ref('1')
const route = useRoute()
let detailInfo = reactive({
  data: ''
})
let dictLists = reactive({
  data: ''
})

onMounted(async () => {
  dictLists.data = await getDictByCodesReturnObj([
    dictEnum.FOLLOW_PROGRESS,
  ])

  selectById({
    id: route.query.id
  }).then(res => {
    if (res.code === 500) return message.error(res.msg || '服务器错误')
    if (res.code === 200) {
      detailInfo.data = {
        ...res.data
      }
      console.log(detailInfo, 'detailInfo')
    }
  })
})
</script>

<style scoped>

</style>
